<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位与绝对定位</title>
		<!--定位，将元素正确布局
		①浮动定位：左右布局
		②相对定位：微调布局针对单一元素
		 positiob：relative；元素进行相对定位
		 特点：相对于父级进行定位，不脱离文档流
		 附加属性：方向属性：left、top、right、bottom，
		 属性值：正负属性px
		        z轴叠加属性：z-index--属性值：数值越大，越靠前
		③绝对定位:叠加效果，通常与相对定位搭配使用，左栏、侧边栏、遮罩层
		左侧--挂靠点
		position:absolute;声明元素进行绝对定位
		特点:相对于祖先【页面左上顶角】进行定位、
		如果有父元素，按照父元素【左上顶角】、脱离文档流
		使用方法:通常与相对定位搭配使用
		④固定定位：页面区域固定在页面上
		相对、绝对、固定属性--附加属性全部通用：方向、叠加属性
		⑤文档流定位：按照元素分类进行定位：块与块【纵排】
		                                行与行【横排】
										块与行【横排】
		-->
		<style>
		/*.box1和.box2 300*300 背景颜色加相对定位*/	
		div{
			width: 300px;
			height: 300px;
		}
		div.box1{
			background: url(img/花1.png);
			background-size:100%;
			/*相对定位，相对最近父级*/
			position: relative;
			left: 0px;
			top: 0px;
			/*叠加属性*/
			z-index:100;
		}
		div.box2{
			background: url(img/花2.png);
			background-size:100%;
			position: relative;
			left: 0px;
			top: 0px;
			z-index: 101;
		}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>